<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" :hasFixedFlag="hasFixedFlag" conCol="#000" bgColor="zxsDet"></custom-nav-sq-xcx>
		<image class="wjImg" :src="getStaticFilePath('wjdc.png')"></image>
		<!--  :style="{top:(navHeight) + 'px'}" -->
		<view class="wjdcList" :style="{top:currTop + 'px'}">
			<view class="newsTab posRel hasFlex alignCen">
				<view class="newsTabItem"
					:class="[tabIndex == index ? 'active' : '']"
					v-for="(item,index) in wjTab"
					:key="index"
				>{{item.name}}<view class="lineView"></view></view>
				<view class="circile posAbso">
					<view class="innerCir"></view>
				</view>
			</view>
			<view class="listWrap posAbso">
				<swiper class="swiper" :current="tabIndex" :skip-hidden-item-layout="true" :duration="tranDuration" @animationfinish="swiperChange" style="height:100%;">
					<swiper-item v-for="(item,index) in wjList" :key="index">
						<scroll-view scroll-y style="height: 100%;" upper-threshold="50"  @scrolltolower="loadMore(index)">
							<template v-if="item.firstload">
								<template v-if="item.isHasDataFlag">
									<view class="padd">
										<wj-list></wj-list>
									</view>
									<!-- <block v-for="(itemInner,indexInner) in item.list" :key="indexInner">
										<wj-list></wj-list>
									</block> -->
									<!-- <loading-view :loading="item.loading"></loading-view> -->
								</template>
								<template v-else-if="item.isHasDataFlag == false"> 
									<!-- 无数据 -->
									<no-data-sq topType="specal" msgTxt="暂无记录"></no-data-sq>
								</template>
							</template>
							<template v-else> 
								<view class="loadingTxt">
									<loading :cirSize="20"></loading>
								</view>
							</template>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import WjList from './components/WjList.vue'
	import NoDataSq from '@/components/no-data-sq/index.vue'
	export default {
		components:{
			WjList,
			NoDataSq
		},
		data(){
			return{
				hasFixedFlag:false,
				wjTab:[
					{id:1,name:'进行中'},
					{id:2,name:'已结束'},
				],
				tabIndex:0,
				wjList:[],
				tranDuration:300,
				currTop:0
			}
		},
		onLoad(){
			uni.createSelectorQuery().select('.wjImg').boundingClientRect(data => {
				this.currTop = data.height - Math.ceil(data.height/6);
			}).exec()

			this.getList();
		},
		methods:{
			getList(){
				let arr = [];
				for (let i = 0; i < this.wjTab.length; i++) {
					arr.push({
						list:[],
						page:1,
						isHasDataFlag:null,
						loading:false,
						firstload:false,
						hasNextFlag:null
					});
				}
				this.wjList = arr;
				this.loadList();
			},
			loadList(){
				let currentIndex = this.tabIndex;
				let tabItem = this.wjList[currentIndex];
				tabItem.loading = true;
				setTimeout(()=>{
					tabItem.loading = false;
					tabItem.isHasDataFlag = true;
					tabItem.firstload = true;
				},1500)
			},
			swiperChange(e){
				let { current } = e.target;
				this.tabIndex = current;
				//this.typeName = this.schSubTab[current].name;
				if(!this.wjList[current].firstload){
					setTimeout(()=>{ 
						this.loadList();
					},300)
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: $sq-fuf;
		height: 100%;
	}
	.wjImg{
		width: 100%;
		height: 465rpx;
	}
	.wjdcList{
		padding: 0 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		background: $sq-fuf;
		z-index: 2;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
		.newsTab{
			height: 120rpx;
			.circile{
				width: 120rpx;
				height: 120rpx;
				background: $sq-fuf;
				border-radius: 50%;
				left: 50%;
				margin-left: -60rpx;
				top: -20rpx;
				display: flex;
				justify-content: center;
				z-index: 10;
				.innerCir{
					width: 20rpx;
					height: 20rpx;
					background: $sq-fue;
					border-radius: 50%;
					margin-top: 20rpx;
				}
			}
			.newsTabItem{
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				color: $sq-main8;
				font-size: 30rpx;
				position: relative;
				.lineView{
					width: 16%;
					height: 8rpx;
					background:$sq-line-linear;
					position: absolute;
					left: 42%;
					bottom: 6px;
					display: none;
				}
				&.active{
					font-weight: 600;
					color: $pss-sq-main;
					font-size: 34rpx;
					.lineView{
						display: block;
					}
				}
			}
		}
		.listWrap{
			left: 0;
			right: 0;
			top: 120rpx;
			bottom: 0rpx;
		}
	}
</style>